<template>
	<view class="content">
		<view class="titleView">
			<text>购买数量(个)</text>
		</view>
		<view class="Number">
			<input class="inputNum" type="number" placeholder="请输入购买数量" placeholder-class="PlaceSytle" @input="input" :disabled="isInput" v-model="buyNumber"/>
		</view>
		<!-- 提示文字 -->
		<view class="hint">
			<text v-if="checkTextType == 0" style="color: #f6464e;">输入数量超过爱豆余额</text>
			<text v-if="checkTextType == 1" style="color: #333333;">当前爱豆剩余0个,<text style="color: #0659C7;" @click="rechargeNow()">立即充值</text></text>
			<text v-if="checkTextType == 2" style="color: #333333;">当前爱豆剩余{{useShop}}个,</text>
			<text v-if="checkTextType == 2" style="color: #0659C7;" @click="allBuy()">全部购买</text>
		</view>
		<view class="buyBtn content" @click="buyDou()">
			<text>购买</text>
		</view>
		<!-- 支付键盘 -->
		<!-- <cu-keyboard ref="cukeyboard" @change="change" @confirm="confirm" @hide="hide" confirmText="购买"></cu-keyboard> -->
	</view>
</template>

<script>
	const app = getApp();
	import * as api from '@/api/login';
	import {isNull} from '@/utils/utils.js'
export default {
	data() {
		return {
			userId:'',
			buyNumber:0,
			useShop:'',
			checkText: '', //提示性文字
			checkTextType:2, 
			isInput:false,  //input是否禁用
			isBuy:true,  //是否可以购买
		};
	},
	onLoad(option) {
		console.log(option.useShop);
		if(option.useShop != null || option.useShop != undefined){
			let num = option.useShop.replace(/,/g,'');
			this.useShop = Number(num);
			if(Number(num) == 0){
				this.isInput = true;
				this.isBuy = false;
				this.checkTextType = 1;
			}else{
				this.isBuy = true;
				this.checkTextType = 2;
			}
		};
		this.userId = this.$store.state.userInfo.currentUser.userId;
	},
	// 监听返回按钮的触发
	// #ifdef APP-PLUS
	onBackPress(options) {
		uni.$emit('updatePurseInfo',{})
		return false;
	},
	// #endif
	
	onUnload() {
		// // #ifndef APP-PLUS
		// uni.$emit('updatePurseInfo',{})
		// // #endif
	},
	methods: {
		input(e){
			// console.log('listening .... input',e.detail.value);
			let value = Number(e.detail.value);
			if(value > this.useShop){
				this.isBuy = false;
				this.checkTextType = 0;
			}else {
				this.isBuy = true;
				this.checkTextType = 2;
				this.buyNumber = value;
			}
		},
		// 确认购买 爱豆
		buyDou(){
			let that = this;
			if(!that.isBuy || that.buyNumber == 0){
				uni.showToast({
					title:'请输入正确的数量',
					icon:'none'
				});
				return;
			}
			let userId = that.userId;
			let data = {
				userId:userId,
				action:'rechargeServicePurse',
				params:{
					orderId:0,
					payType:'充值',
					amount: that.buyNumber
				}
			};
			api.rechargeServicePurse(data).then(function (res) {
				console.log('rechargeServicePurse success',res);
				if(res.data.code == 2000){
					uni.$emit('updatePurseInfo',{})
					that.$toast('操作成功');
					// 此处返回前一页
					uni.navigateBack({
						delta: 1
					});
				}else{
					uni.showToast({
						title: res.data.message,
						icon:'none'
					});
				}
			}).catch(function (error) {
				console.log('rechargeServicePurse fail', error);
			});
		},
		// 立即购买 商城爱豆
		rechargeNow(){
			uni.redirectTo({
				url: '../../rechargeCenter/rechargeCenter'
			});
		},
		// 全部购买
		allBuy(){
			this.buyNumber = Number(this.useShop);
		},
	}
};
</script>

<style>
page {
	background-color: #FFFFFF;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.flex-c {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.titleView {
	margin-top: 80rpx;
	width: 700rpx;
	display: flex;
	flex-direction: column;
}

.titleView text {
	font-size: 38rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
	margin-left: 15rpx;
}

.Number {
	width: 700rpx;
	height: 122rpx;
	margin-top: 43rpx;
	background-color: #e6e6e6;
	border-radius: 50px;
	display: flex;
	align-items: center;
}

.inputNum {
	margin-left: 45rpx;
	font-size: 58rpx;
	font-family: Roboto;
	font-weight: bold;
	color: #0659C7;
}

.PlaceSytle {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}
.hint {
	font-size: 28rpx;
	height: 20px;
	width: 80%;
	margin-top: 20rpx;
}
.buyBtn {
	margin-top: 200rpx;
	width: 550rpx;
	height: 100rpx;
	border-radius: 50px;
	background-color: #0659C7;
}
.buyBtn text {
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: white;
}
</style>
